<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
            </div>
          </template>
          <ul>
            <li>
              <ChangeAvatar :user="userInfo" />
            </li>
            <li>
              <svg-icon icon="user" />&nbsp;&nbsp; 用户姓名
              <div class="right-box">{{ userInfo.username }}</div>
            </li>
            <li>
              <svg-icon icon="phone" />&nbsp;&nbsp; 手机号码
              <div class="right-box">{{ userInfo.phonenumber }}</div>
            </li>
            <li>
              <svg-icon icon="email" />&nbsp;&nbsp; 用户邮箱
              <div class="right-box">{{ userInfo.email }}</div>
            </li>
            <li>
              <svg-icon icon="peoples" />&nbsp;&nbsp; 所属角色
              <div class="right-box">{{ userInfo.roles }}</div>
            </li>
            <li>
              <svg-icon icon="date" />&nbsp;&nbsp; 创建日期
              <div class="right-box">
                {{ timestampToTime(userInfo.createTime) }}
              </div>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>基本信息</span>
            </div>
          </template>
          <div>
            <el-tabs v-model="activeName">
              <!-- 传入子组件 -->
              <el-tab-pane label="基本资料" name="first">
                <UserInfo :user="userInfo" />
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="second">
                <ResetPwd :user="userInfo" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script  setup>
import ChangeAvatar from "./components/ChangeAvatar";
import ResetPwd from "./components/ResetPwd";
import UserInfo from "./components/UserInfo";
import store from "@/store";
import { ref } from "vue";
import { timestampToTime } from "@/util/timestampToTime";

const userInfo = ref(store.getters.GET_USER);
const activeName = ref("first");
</script>
<style lang="scss" scoped>
ul {
  li {
    margin: 20px auto;
    .right-box {
      display: flex;
      justify-content: flex-end;
      float: right;
      margin-right: 12px;
    }
  }
}
::v-deep .el-tabs__item.is-active {
  background-color: #fff !important;
}
.el-card {
  min-height: 400px;
}
</style>